import { RouterProvider } from "react-router-dom";
import { legacyLogicalPropertiesTransformer, StyleProvider } from "@ant-design/cssinjs";
import { App as AntdApp, ConfigProvider, theme as antdTheme } from "antd";
import { useTheme } from "./components/theme-provider";
import { useSettingsStore } from "./stores/settings";

import zhCN from "antd/locale/zh_CN";
import "dayjs/locale/zh-cn";

import { router } from "@/router";

function App() {
  const { isDarkMode } = useTheme();
  const colorPrimary = useSettingsStore((state) => state.colorPrimary);

  console.log("isDarkMode", isDarkMode);

  return (
    <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
      <ConfigProvider
        locale={zhCN}
        theme={{
          cssVar: true, // 开启 css 变量
          hashed: false, // 如果你的应用中只存在一个版本的 antd，你可以设置为 false 来进一步减小样式体积。
          algorithm: isDarkMode ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
          token: {
            colorPrimary,
          },
          components: {
            Layout: {
              headerPadding: "0 24px",
            },
          },
        }}
        componentSize="large"
      >
        <AntdApp>
          <RouterProvider
            router={router}
            future={{
              v7_startTransition: true,
            }}
          />
        </AntdApp>
      </ConfigProvider>
    </StyleProvider>
  );
}

export default App;
